/*首图传参示例：
参数1：
{areaName: null
campId: "2139980403"
detailsImg: 0
heroNum: "4"
input37490: ""
inscriptions: "7"
nobNum: "67"
roleId: "2016312283"
rongyaoCount: "0"
shengbiao: "0"
shiming: 1
shuijingnum: "0"
skinNum: "3"
textImg: 1
type: "王者荣耀"
vipLevel: "5"
xingyung: "9"
yinji: "8"
zijing: "8"}

参数2：
[
  {
      "fieldName": "时之愿境",
      "sort": -1,
      "imgUrl": "https://pvppic.kohsocialapp.qq.com/wzzs_pic/0/77cb0b36c6b99c0a95269a901b6d89f7/0",
  }
]
参数3：自定义字段的属性详情

**详情图传参只接受list，数据格式同首图参数2

*/
//导入 金铲铲 生成方法
import { makeTitleImgJCC, makeDetailImgJCC } from "./makeImgs-utils/jinChanchan"
// 加载图片
function getURLBase64(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status === 200) {
        var blob = this.response;
        var fileReader = new FileReader();
        fileReader.onloadend = function (e) {
          var result = e.target.result;
          resolve(result);
        };
        fileReader.readAsDataURL(blob);
      }
    };
    xhr.onerror = function (err) {
      reject(err);
    };
    xhr.send();
  });
}

// 生成详情图
function makeDetailImg(skins) {
  return new Promise((resolve, reject) => {
    let instancesUrl = skins;
    console.log("皮肤列表", skins);
    const length = instancesUrl.length;
    let instances = [];
    // file.szBigIcon
    instancesUrl.forEach(async (file, index) => {
      // if (file.imgUrl) {
      let res = await getURLBase64(file.imgUrl);
      const image = new Image();
      image.src = res;
      image.onload = async () => {
        // 图片实例化成功后存起来
        instances.push({
          image: image,
          name: file.fieldName,
        });
        if (index + 1 >= length) {
          resolve(drawImages(instances));
        }
      };
      image.onerror = async () => {
        if (index + 1 >= length) {
          resolve(drawImages(instances));
        }
      };
      // }
    });
  });
}
// 写入图片
function drawImages(images) {
  console.log("%c Line:94 🥓 images", "color:#ffdd4d", images);
  return new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    // 21个皮肤为一组
    let num = parseInt(images.length / 21) + 1; //一共有多少组
    if (images.length % 21 == 0) {
      num = num - 1;
    }
    canvas.width = 1737;
    canvas.height = 920 * num;
    context.fillStyle = "#fff"; // 文字填充颜色
    context.font = "24px Adobe Ming Std";
    let initWith = 158;
    let height = 210;
    // 获取背景图
    // let bgImg
    getURLBase64("https://imgv2.zuyoul.com/402883e98dd490c2018dd5440d5d006a.jpg")
      .then((res) => {
        const image = new Image();
        image.src = res;
        image.onload = () => {
          // 图片实例化成功后存起来
          let bgImg = image;
          let setH = 0;
          let pages = [];
          for (let i = 0; i < num; i++) {
            pages[i] = images.slice(i * 21, i * 21 + 21);
          }
          pages.forEach((page, k) => {
            context.drawImage(bgImg, 0, setH, 1737, 889);
            let i = 0;
            let line = 1;
            let y = 80 + 210 + 15 + k * 920;
            let imgy = 60 + k * 920;
            page.forEach((item) => {
              if (i == 0) {
                context.drawImage(item.image, 150, imgy, initWith, height);
                context.fillText(item.name, 150, y);
              } else {
                context.drawImage(
                  item.image,
                  initWith * i + 150 + 60 * i,
                  imgy,
                  initWith,
                  height
                );
                context.fillText(item.name, initWith * i + 150 + 60 * i, y);
              }
              i++;
              if (i != 0 && i % 7 == 0) {
                if (line == 1) {
                  imgy = 80 + height * line + 30 + k * 920;
                  y = 80 + height * 2 + 60 + k * 920;
                } else if (line == 2) {
                  imgy = 80 + height * line + 40 * line + k * 920;
                  y = 80 + height * (line + 1) + 55 * line + k * 920;
                } else if (line == 3) {
                  imgy = 80 + height * line + 700 + k * 920;
                  y = 80 + height * (line + 1) + 70 + k * 920;
                }
                line++;
                i = 0;
              }
            });
            setH += 920;
          });
          const base64Url = canvas.toDataURL("image/jpeg", 0.2);
          console.log(
            "%c 🍏 详情图: ",
            "font-size:20px;background-color: #465975;color:#fff;",
            base64Url
          );
          resolve(base64Url);
        };
      })
      .catch((err) => {
        console.log(
          "%c 🍑 err: ",
          "font-size:20px;background-color: #33A5FF;color:#fff;",
          err
        );
        reject(err);
      });
  });
}
// 加载图片并创建图片实例 benghuai
function getURLBase64Image(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status === 200) {
        var blob = this.response;
        var fileReader = new FileReader();
        fileReader.onloadend = function (e) {
          if (e.target.result) {
            var result = e.target.result;
            const image = new Image();
            image.src = result;
            image.onload = () => {
              resolve(image);
            };
          } else {
            reject('图片地址错误');
          }

        };
        fileReader.readAsDataURL(blob);
      }
    };
    xhr.onerror = function (err) {
      reject(err);
    };
    xhr.send();
  });
}
// 生成首图 暂时废弃
function makeTitleImg(data, list) {
  console.log("首图数据", data);
  let arr = JSON.parse(JSON.stringify(list));
  return new Promise((resolve, reject) => {
    if (!arr || arr == []) {
      reject("皮肤列表不能为空");
    }
    getURLBase64("https://game.ikbh.top/logo/yjwjjj.jpg")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          let titlName = `区服 ${data.areaName || "--"}(贵族 V${data.vipLevel || "--"
            })`;
          context.fillStyle = "#ffff00";
          context.font = "normal bold 135px Adobe Ming Std";
          context.fillText(titlName, 842, 280);
          context.font = "100px Adobe Ming Std";
          context.fillStyle = "#ffff00";
          context.fillText(`英雄数量 ${data.heroNum || "--"}`, 200, 522);
          context.fillText(`皮肤数量 `, 200, 700);
          context.fillText(`贵族等级 `, 1245, 700);
          context.fillText(`水晶数量 `, 2050, 700);
          // 红色字体
          context.fillStyle = "#ff0000";
          context.fillText(`${data.skinNum || "--"}`, 640, 700);
          context.fillText(`${data.vipLevel || "--"}`, 1680, 700);
          context.fillText(`${data.shuijingnum || "--"}`, 2475, 700);
          context.fillText(`贵族积分 ${data.nobNum || "--"}`, 2050, 522);
          context.fillText(`五级铭文 ${data.inscriptions || "--"}`, 1245, 522);
          // 白色字体
          context.fillStyle = "#fff";
          context.fillText(`王者印记 ${data.yinji || "--"}`, 200, 900);
          context.fillText(
            ` ${data.shiming == 1 ? "可实名" : "包人脸"}`,
            2150,
            900
          );
          context.fillText(`紫晶币 ${data.zijing || "--"}`, 200, 2300);
          context.fillText(`幸运值 ${data.xingyung || "--"}`, 2300, 2300);
          // 底部统计
          context.fillStyle = "#ffff00";
          context.fillText(
            `MVP次数 ${data.mvpNum || "--"} 游戏场次 ${data.totalCount || "--"
            } 战斗力 ${data.zhandouli || "--"}`,
            522,
            2520
          );
          context.fillText(`省标 ${data.shengbiao || "--"} `, 1350, 2650);
          // 皮肤字体
          context.font = "normal bold 80px Adobe Ming Std";
          let skin = arr.splice(0, 32);
          var x1 = 200;
          var h = 920;
          skin.map((item, index) => {
            if (index < 32) {
              if (item.sort == -1) {
                context.fillStyle = "#00FFD9";
              } else if (item.sort === 0) {
                context.fillStyle = "#E6FF00";
              } else {
                context.fillStyle = "#ffff00";
              }
              if (index % 4 == 0) {
                x1 = 200;
                //控制行高
                h = h + 150;
              }
              context.fillText(item.fieldName, x1, h);
              //控制列间隔
              x1 = x1 + 700;
            }
          });
          const base64Url = canvas.toDataURL("image/jpeg", 0.3);
          console.log(
            "%c 🍏 base64Url: ",
            "font-size:20px;background-color: #465975;color:#fff;",
            base64Url
          );
          resolve(base64Url);
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 生成长方形首图  暂时废弃
function makeTitleImgChang(data, list) {
  let arr = JSON.parse(JSON.stringify(list));
  return new Promise((resolve, reject) => {
    if (!arr || arr == []) {
      reject("皮肤列表不能为空");
    }
    getURLBase64("https://game.ikbh.top/logo/back-img.jpg")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          let titlName = `区服 ${data.areaName || "--"}(贵族 V${data.vipLevel || "--"
            })`;
          context.fillStyle = "#ffff00";
          context.font = "normal bold 36px Adobe Ming Std";
          context.fillText(titlName, 700, 110);
          context.font = "38px Adobe Ming Std";
          context.fillStyle = "#ffff00";
          context.fillText(`英雄数量 ${data.heroNum || "--"}`, 200, 201);
          context.fillText(`皮肤数量 `, 200, 251);
          context.fillText(`贵族等级 `, 550, 251);
          context.fillText(`水晶数量 `, 900, 251);
          // 红色字体
          context.fillStyle = "#ff0000";
          context.fillText(`${data.skinNum || "--"}`, 360, 251);
          context.fillText(`${data.vipLevel || "--"}`, 710, 251);
          context.fillText(`${data.shuijingnum || "--"}`, 1060, 251);
          context.fillText(`贵族积分 ${data.nobNum || "--"}`, 900, 201);
          context.fillText(`五级铭文 ${data.inscriptions || "--"}`, 550, 201);
          // 白色字体
          context.fillStyle = "#fff";
          context.fillText(`王者印记 ${data.yinji || "--"}`, 1250, 201);
          context.fillText(
            ` ${data.shiming == 1 ? "可实名" : "包人脸"}`,
            1250,
            251
          );
          context.fillText(`紫晶币 ${data.zijing || "--"}`, 200, 301);
          context.fillText(`幸运值 ${data.xingyung || "--"}`, 1250, 301);
          // 底部统计
          context.fillStyle = "#ffff00";
          context.fillText(
            `MVP次数 ${data.mvpNum || "--"} 游戏场次 ${data.totalCount || "--"
            } 战斗力 ${data.zhandouli || "--"}省标 ${data.shengbiao || "--"}`,
            450,
            782
          );
          // context.fillText(`省标 ${data.shengbiao||''} `, 800, 801);
          // 皮肤字体
          context.font = "normal bold 33px Adobe Ming Std";
          let skin = arr.splice(0, 35);
          var x1 = 200;
          var h = 321;
          skin.map((item, index) => {
            if (index < 35) {
              if (item.sort == -1) {
                context.fillStyle = "#00FFD9";
              } else if (item.sort === 0) {
                context.fillStyle = "#E6FF00";
              } else {
                context.fillStyle = "#ffff00";
              }
              if (index % 5 == 0) {
                x1 = 200;
                //控制行高
                h = h + 55;
              }
              context.fillText(item.fieldName, x1, h);
              //控制列间隔
              x1 = x1 + 270;
            }
          });
          const base64Url = canvas.toDataURL("image/jpeg", 0.3);

          resolve(base64Url);
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 加载图片新
async function loadImages(list, length) {
  return new Promise(async (resolve, reject) => {
    if (list.length == 0) {
      reject(false);
    } else {
      let num = length ? (length > list.length ? list.length : length) : list.length
      let imgs = [];
      for (let i = 0; i < list.length; i++) {
        let file = list[i];
        if (file.imgUrl) {
          try {
            let image = await getURLBase64Image(file.imgUrl);
            // 图片实例化成功后存起来
            imgs.push({
              image: image,
              name: file.fieldName,
              sort: file.sort,
              remark: file.remark,
            });
            if (imgs.length >= num) {
              resolve(imgs);
              return
            }
          }
          catch (err) {
            console.log("%c Line:81 🍰 err", "color:#33a5ff", err);
            continue
          }
        }
      }
      resolve(imgs);
    }
  });
}
// 绘制图片  单页
async function drawImagesWzryLine(context, imgs, options) {
  // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
  if (imgs && imgs.length) {
    // console.log("%c Line:590 🍕 imgs", "color:#f5ce50", imgs);
    let i = 0;
    let line = 1;
    let startX = options.startX
    let startY = options.startY
    let hideTxt = options.hideTxt || false
    let stepY = options.stepY || 80
    let stepX = options.stepX || 40
    let txtLineHeight = options.txtLineHeight || 50
    let borderImg = options.borderImg || ''
    let imgWidth = options.imgWidth1 || 222
    let height = options.imgHeight || 300
    let y = startY + height + txtLineHeight;
    let imgy = startY
    let txtbg = ''
    if (options.gameType == 'lol' || options.gameType == 'lolm') {
      txtbg = await getURLBase64Image('/static/img/loltxtbg.png');
    }
    if (options.gameType == 'yjwj') {
      txtbg = await getURLBase64Image('/static/img/yjwjtxtbg.png');
    }
    for (let j = 0; j < imgs.length; j++) {
      const item = imgs[j]
      if ((i + 1) % (options.rowNum + 1) == 0) {
        imgy = imgy + stepY + height + txtLineHeight;
        y = imgy + height + txtLineHeight;
        line++;
        i = 0;
      }
      context.drawImage(
        item.image,
        startX + (imgWidth + stepX) * i,
        imgy,
        imgWidth,
        height
      );
      if (borderImg) {
        context.drawImage(borderImg, startX + (imgWidth + stepX) * i - 8,
          imgy - 8,
          imgWidth + 16, height + 16);
      }
      if (!hideTxt) {
        context.fillText(item.name, startX + (imgWidth + stepX) * i, y);
      }
      if (options.gameType && (options.gameType == 'lol' || options.gameType == 'yjwj' || options.gameType == 'lolm')) {

        context.drawImage(txtbg, startX + (imgWidth + stepX) * i,
          imgy + height - 66,
          imgWidth, 66);
        if (options.gameType == 'lol') {
          let skinSign = ''
          if (item.remark) {
            const remarks = item.remark.split(',')
            skinSign = await getURLBase64Image(remarks[1]);
          }
          if (skinSign) {
            context.drawImage(skinSign, startX + (imgWidth + stepX) * i + 20,
              imgy + height - 150,
              120, 80);
          }
        }
        if (item.name.length > 6) {
          const name1 = item.name.slice(0, 6)
          const name2 = item.name.slice(6, 12)
          context.fillText(name1, startX + (imgWidth + stepX) * i + 20, imgy + height - 37);
          context.fillText(name2, startX + (imgWidth + stepX) * i + 20, imgy + height - 12);
        } else {
          context.fillText(item.name, startX + (imgWidth + stepX) * i + 20, imgy + height - 25);
        }
      }
      i++;
    }
    // imgs.forEach(async (item) => {
    //   if ((i+1) %(options.rowNum +1) == 0) {
    //     imgy = imgy + stepY + height+txtLineHeight;
    //     y = imgy + height + txtLineHeight ;
    //     line++;
    //     i = 0;
    //   }

    //   context.drawImage(
    //     item.image,
    //     startX+(imgWidth+stepX) * i ,
    //     imgy,
    //     imgWidth,
    //     height
    //   );
    //   if(borderImg){
    //     context.drawImage(borderImg,  startX+(imgWidth+stepX) * i-8 ,
    //     imgy-8,
    //     imgWidth+16, height+16);
    //   }
    //   if(!hideTxt){
    //     context.fillText(item.name,  startX+(imgWidth+stepX) * i , y);
    //   }
    //   if(options.gameType&&options.gameType=='lol'){
    //     let txtbg = await getURLBase64Image(file.imgUrl);
    //     context.fillText(item.name,  startX+(imgWidth+stepX) * i , imgy + height-50);
    //   }
    //   i++;
    // });
    return context
  } else {
    return context
  }
}

// 王者单页
function drawImagesWzryLineOneXIN(context, imgs, options) {
  // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
  if (imgs && imgs.length) {
    console.log("%c Line:590 🍕 imgs", "color:#f5ce50", imgs);
    let i = 0;
    let line = 1;
    let startX = options.startX
    let startY = options.startY
    let hideTxt = options.hideTxt || false
    let stepY = options.stepY || 40
    let stepX = options.stepX || 30
    let txtLineHeight = options.txtLineHeight || 10
    let borderImg = options.borderImg || ''
    let imgWidth = options.imgWidth1 || 156
    let height = options.imgHeight || 273
    let y = startY + height + txtLineHeight;
    let imgy = startY
    imgs.forEach((item) => {
      if ((i + 1) % (options.rowNum + 1) == 0) {
        imgy = imgy + stepY + height + txtLineHeight;
        y = imgy + height + txtLineHeight;
        line++;
        i = 0;
      }
      if (i == 0) {
        context.drawImage(item.image, startX, imgy, imgWidth, height);
        if (borderImg) {
          context.drawImage(borderImg, startX - 8, imgy - 8, imgWidth + 16, height + 16);
        }
        // if(!hideTxt){
        //   context.fillText(item.name, startX+(imgWidth+stepX) * i , y);
        // }

      } else {
        context.drawImage(
          item.image,
          startX + (imgWidth + stepX) * i,
          imgy,
          imgWidth,
          height
        );
        if (borderImg) {
          context.drawImage(borderImg, startX + (imgWidth + stepX) * i - 8,
            imgy - 8,
            imgWidth + 16, height + 16);
        }
        // if(!hideTxt){
        //   context.fillText(item.name,  startX+(imgWidth+stepX) * i , y);
        // }

      }
      i++;
    });
    return context
  } else {
    return context
  }
}
// LOL手游
function drawImagesLOLLineOneXIN(context, imgs, options) {
  // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
  if (imgs && imgs.length) {
    console.log("%c Line:590 🍕 imgs", "color:#f5ce50", imgs);
    let i = 0;
    let line = 1;
    let startX = options.startX
    let startY = options.startY
    let hideTxt = options.hideTxt || false
    let stepY = options.stepY || 40
    let stepX = options.stepX || 30
    let txtLineHeight = options.txtLineHeight || 10
    let borderImg = options.borderImg || ''
    let imgWidth = options.imgWidth1 || 156
    let height = options.imgHeight || 273
    let y = startY + height + txtLineHeight;
    let imgy = startY
    imgs.forEach((item) => {
      if ((i + 1) % (options.rowNum + 1) == 0) {
        imgy = imgy + stepY + height + txtLineHeight;
        y = imgy + height + txtLineHeight;
        line++;
        i = 0;
      }
      if (i == 0) {
        context.drawImage(item.image, startX, imgy, imgWidth, height);
        if (borderImg) {
          context.drawImage(borderImg, startX - 8, imgy - 8, imgWidth + 16, height + 16);
        }
        // if(!hideTxt){
        //   context.fillText(item.name, startX+(imgWidth+stepX) * i , y);
        // }

      } else {
        context.drawImage(
          item.image,
          startX + (imgWidth + stepX) * i,
          imgy,
          imgWidth,
          height
        );
        if (borderImg) {
          context.drawImage(borderImg, startX + (imgWidth + stepX) * i - 8,
            imgy - 8,
            imgWidth + 16, height + 16);
        }
        // if(!hideTxt){
        //   context.fillText(item.name,  startX+(imgWidth+stepX) * i , y);
        // }

      }
      i++;
    });
    return context
  } else {
    return context
  }
}

// 生成游戏首图
function makeTitleImgYjwj(data, list, attrs) {
  if (data.gameName == "和平精英") {
    return makeTitleImgHpjy(data, list, attrs);
  }
  if (data.gameName == "王者荣耀") {
    return makeTitleImgWZRY(data, list, attrs);
  }
  if (data.gameName == "无畏契约") {
    return makeTitleImgWWQY(data, list, attrs);
  }
  if (data.gameId == 5) {
    // 英雄联盟
    return makeTitleImgLOL(data, list, attrs)
  }

  if (data.gameId == 25) {
    // 英雄联盟手游
    return makeTitleImgLOLSHOU(data, list, attrs)
  }
  if (data.gameId == 12) {
    // 永劫无间
    return makeTitleImgYjwjNew(data, list, attrs)
  }
  if (data.gameId == 16) {
    // 金铲铲
    return makeTitleImgJCC(data, list, attrs)
  }

  let keys = attrs.filter((i) => {
    return (
      i.fieldType == "input" || i.fieldType == "number" || i.fieldType == "date"
    );
  });
  return new Promise((resolve, reject) => {
    if (!list || list == []) {
      reject("多选不能为空");
    }
    // 取出已选择项
    let arr = [];
    list = list.split(",");
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        } else if (item1.fieldType == "boxradio" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            item2.childGameAttributes.forEach(async (item3) => {
              if (list.indexOf(String(item3.id)) > -1) {
                arr.push(item3);
              }
            });
          });
        }
      });
    }

    getURLBase64("https://game.ikbh.top/logo/yjwjjj.jpg")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          /**  */
          let titlName = `${data.gameName}`;
          context.fillStyle = "#ffff00";
          context.font = "normal bold 135px Adobe Ming Std";
          context.fillText(
            titlName,
            (3000 - (titlName ? titlName.length : 0) * 135) / 2,
            280
          );
          context.font = "100px Adobe Ming Std";
          if (keys[0] && keys[0].aavName != "qita") {
            context.fillText(
              `${keys[0] ? keys[0].fieldName : ""} ${data[keys[0].aavName] ? data[keys[0].aavName] : "--"
              }`,
              150,
              522
            );
          }
          if (keys[1] && keys[1].aavName != "qita") {
            context.fillText(
              `${keys[1] ? keys[1].fieldName : ""} ${data[keys[1].aavName] ? data[keys[1].aavName] : "--"
              } `,
              150,
              700
            );
          }
          if (keys[2] && keys[2].aavName != "qita") {
            context.fillText(
              `${keys[2] ? keys[2].fieldName : ""} ${data[keys[2].aavName] ? data[keys[2].aavName] : "--"
              }`,
              1100,
              522
            );
          }
          if (keys[3] && keys[3].aavName != "qita") {
            context.fillText(
              `${keys[3] ? keys[3].fieldName : ""} ${data[keys[3].aavName] ? data[keys[3].aavName] : "--"
              }`,
              1100,
              700
            );
          }

          if (keys[4] && keys[4].aavName != "qita") {
            context.fillText(
              `${keys[4] ? keys[4].fieldName : ""} ${data[keys[4].aavName] ? data[keys[4].aavName] : "--"
              }`,
              2100,
              522
            );
          }
          if (keys[5] && keys[5].aavName != "qita") {
            context.fillText(
              `${keys[5] ? keys[5].fieldName : ""} ${data[keys[5].aavName] ? data[keys[5].aavName] : "--"
              }`,
              2100,
              700
            );
          }
          // 底部
          if (keys[6]) {
            context.fillText(
              `${data[keys[6].aavName] ? data[keys[6].aavName] : "--"}`,
              (3000 -
                (data[keys[6].aavName] ? data[keys[6].aavName].length : 0) *
                90) /
              2,
              2520
            );
          }

          // 皮肤字体
          context.font = "normal bold 100px Adobe Ming Std";
          let skin = arr.splice(0, 32);
          console.log("%c Line:431 🥤 skin", "color:#3f7cff", skin);
          var x1 = 150;
          var h = 920;
          skin.map((item, index) => {
            if (index < 32) {
              if (index % 4 == 0) {
                x1 = 150;
                //控制行高
                h = h + 150;
              }
              let nametxt = "";
              if (data.gameName == "王者荣耀") {
                nametxt = item.fieldName.split("-")[1]
                  ? item.fieldName.split("-")[1]
                  : item.fieldName.split("-")[0];
              } else {
                nametxt = item.fieldName.slice(0, 7);
              }

              context.fillText(nametxt, x1, h);
              //控制列间隔
              x1 = x1 + 700;
            }
          });
          const base64Url = canvas.toDataURL("image/jpeg", 0.3);
          console.log(
            "%c 🍏 base64Url: ",
            "font-size:20px;background-color: #465975;color:#fff;",
            base64Url
          );
          resolve(base64Url);
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 王者
async function makeTitleImgWZRY(data, list, attrs) {
  return new Promise((resolve, reject) => {
    // 取出已选择项
    let arr = [];
    let shiming = null;
    let viplv = null;
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.aavName == "f2") {
          if (data.f2) {
            viplv = item1.childAttributes.filter((i) => {
              return i.id == data.f2;
            });
          }
        }
        if (item1.aavName == "f16") {
          if (data.f16) {
            shiming = item1.childAttributes.filter((i) => {
              return i.id == data.f16;
            });
          }
        }
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        }
      });
    }
    getURLBase64("/static/img/wzryskybluebg.png")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = async () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#ffff00";
          context.font = "60px Adobe Ming Std";
          context.fillText(`${data.f13 || "--"}`, 450, 279);
          context.fillText(
            `${data.systemName + data.carrierName || "--"}`,
            300,
            435
          );
          context.fillText(`${data.f7 || "--"}`, 450, 590);
          context.fillText(`${data.f8 || "--"}`, 450, 742);
          context.fillText(
            `${viplv && viplv.length ? viplv[0].fieldName : "--"}`,
            450,
            895
          );
          context.fillText(`${data.f1 || "--"}`, 300, 1047);
          context.fillText(`${data.f6 || "--"}`, 450, 1200);
          //  加载皮肤图片
          context.fillStyle = "#ffffff";
          context.font = "30px Adobe Ming Std";
          context.display = 'none'
          let skinImgs = [];
          if (arr && arr.length) {
            skinImgs = await loadImages(arr, 27);
          } else {
            // 没有Sren
          }
          // .sort(sortBy("sort"))
          let instances = skinImgs.length ? skinImgs : [];
          // 加载边框
          getURLBase64("/static/img/skin-border.png").then((border) => {
            const borderImg = new Image();
            borderImg.src = border;
            borderImg.onload = () => {
              if (instances && instances.length) {
                let img15 = instances.splice(0, 27);
                // 开始绘制
                // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
                let opts = {
                  startX: 800,
                  startY: 256,
                  rowNum: 9,
                  borderImg: borderImg,
                };
                drawImagesWzryLineOneXIN(context, img15, opts);
                // 绘制结束
                const base64Url = canvas.toDataURL("image/jpeg", 0.8);
                resolve(base64Url);
              } else {
                const base64Url = canvas.toDataURL("image/jpeg", 0.8);
                resolve(base64Url);
              }
            };
          });
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
//LOL手游
async function makeTitleImgLOLSHOU(data, list, attrs) {
  return new Promise((resolve, reject) => {
    // 取出已选择项
    let arr = [];
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    let duanwei = '--'
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        }
        // 找出段位
        if (item1.aavName == 'f3') {
          item1.childAttributes.forEach(async (item2) => {
            if (data.f3 == item2.id) {
              duanwei = item2.fieldName
            }
          });
        }

      });
    }

    getURLBase64("/static/img/lolmbg.png")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = async () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#ffffff";
          context.font = "bold 65px Adobe Ming Std ";
          context.fillText(`${data.systemName || '-'}${data.carrierName || '-'}`, 278, 400); //区服
          context.fillText(`${data.f5 || '--'}`, 406, 578);//英雄数量
          context.fillText(`${data.f6 || '--'}`, 406, 755);//皮肤数量
          context.fillText(`${duanwei || '--'}`, 278, 930);//段位
          //  context.fillText(`${data.f19||'--'}`, 336, 915);//至臻数量
          //  context.fillText(`${data.f5||'--'}`, 336, 1043);//炫彩数量
          //  context.fillText(`${duanwei||'--'}`, 240, 1171);//段位
          //  加载皮肤图片
          context.fillStyle = "#ffffff";
          context.font = "20px Adobe Ming Std";
          let skinImgs = [];
          if (arr && arr.length) {
            skinImgs = await loadImages(arr, 36);
          } else {
            // 没有Sren
          }
          // .sort(sortBy("sort"))
          let instances = skinImgs.length ? skinImgs : [];
          if (instances && instances.length) {
            // 开始绘制
            let opts = {
              startX: 800,
              startY: 246,
              rowNum: 9,
              borderImg: '',
              imgWidth1: 160,
              imgHeight: 252,
              stepY: 31,
              stepX: 24,
              txtLineHeight: 1,
              hideTxt: true,
              gameType: 'lolm',
            }
            await drawImagesWzryLine(context, instances, opts)
            // 绘制结束
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          } else {
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          }
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 生成英雄联盟 lol 首图
async function makeTitleImgLOL(data, list, attrs) {
  return new Promise((resolve, reject) => {
    // 取出已选择项
    let arr = [];
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    let duanwei = '--'
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        }
        // 找出段位
        if (item1.aavName == 'f2') {
          item1.childAttributes.forEach(async (item2) => {
            if (data.f2 == item2.id) {
              duanwei = item2.fieldName
            }
          });
        }

      });
    }

    getURLBase64("/static/img/LOLbg.png")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = async () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#ffffff";
          context.font = "50px Adobe Ming Std";
          context.fillText(`${data.thirdId || '--'}`, 240, 403); //编码
          context.fillText(`${data.serverName || '--'}`, 240, 528);//区服
          context.fillText(`${data.f3 || '--'}`, 336, 659);//英雄数量
          context.fillText(`${data.f4 || '--'}`, 336, 787);//皮肤数量
          context.fillText(`${data.f31 || '--'}`, 336, 915);//至臻数量
          context.fillText(`${data.f5 || '--'}`, 336, 1043);//炫彩数量
          context.fillText(`${duanwei || '--'}`, 240, 1171);//段位
          //  加载皮肤图片
          context.fillStyle = "#ffffff";
          context.font = "20px Adobe Ming Std";
          let skinImgs = [];
          if (arr && arr.length) {
            skinImgs = await loadImages(arr, 36);
          } else {
            // 没有Sren
          }
          // .sort(sortBy("sort"))
          let instances = skinImgs.length ? skinImgs : [];
          if (instances && instances.length) {
            // 开始绘制
            let opts = {
              startX: 800,
              startY: 246,
              rowNum: 9,
              borderImg: '',
              imgWidth1: 160,
              imgHeight: 252,
              stepY: 31,
              stepX: 24,
              txtLineHeight: 1,
              hideTxt: true,
              gameType: 'lol',
            }
            await drawImagesWzryLine(context, instances, opts)
            // 绘制结束
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          } else {
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          }
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 生成永劫无间首图
function makeTitleImgYjwjNew(data, list, attrs) {
  return new Promise((resolve, reject) => {
    // 取出已选择项
    let arr = [];
    let duanweiList = []
    let duanweiStr = ''
    let dwName = ''
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        }
      });

      duanweiList = attrs.filter(item => item.aavName == 'f48')
      duanweiStr = duanweiList[0].childAttributes.filter(item => item.id == data.f48)
      dwName = duanweiStr[0].fieldName
    }

    getURLBase64("/static/img/yjwjbg.png")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = async () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#ffffff";
          context.font = "50px Adobe Ming Std";
          context.fillText(`${data.thirdId || '--'}`, 240, 403); //编码
          context.fillText(`${data.f47 || '--'}`, 385, 528);//通行证等级
          context.fillText(`${dwName || '--'}`, 240, 659);//段位
          context.fillText(`${data.f49 || '--'}`, 240, 787);//等级
          context.fillText(`${data.f29 || '--'}`, 285, 915);//红品数
          context.fillText(`${data.f31 || '--'}`, 285, 1043);//金品数
          context.fillText(`${data.f46 || '--'}`, 285, 1171);//幻丝数
          //  加载皮肤图片
          context.fillStyle = "#ffffff";
          context.font = "bold 22px Adobe Ming Std";
          let skinImgs = [];
          if (arr && arr.length) {
            skinImgs = await loadImages(arr, 36);
          } else {
            // 没有Sren
          }
          // .sort(sortBy("sort"))
          let instances = skinImgs.length ? skinImgs : [];
          if (instances && instances.length) {
            // 开始绘制
            let opts = {
              startX: 800,
              startY: 246,
              rowNum: 9,
              borderImg: '',
              imgWidth1: 160,
              imgHeight: 252,
              stepY: 31,
              stepX: 24,
              txtLineHeight: 1,
              hideTxt: true,
              gameType: 'yjwj',
            }
            await drawImagesWzryLine(context, instances, opts)
            // 绘制结束
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          } else {
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          }
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 生成和平精英首图
function makeTitleImgHpjy(data, list, attrs) {
  let keys = attrs.filter((i) => {
    return (
      i.fieldType == "input" || i.fieldType == "number" || i.fieldType == "date"
    );
  });

  return new Promise((resolve, reject) => {
    if (!list || list == []) {
      reject("多选不能为空");
    }
    // 取出已选择项
    let arr = [];
    list = list.split(",");
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        } else if (item1.fieldType == "boxradio" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            item2.childGameAttributes.forEach(async (item3) => {
              if (list.indexOf(String(item3.id)) > -1) {
                arr.push(item3);
              }
            });
          });
        }
      });
    }
    getURLBase64("https://game.ikbh.top/logo/yjwjjj.jpg")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          /**  */
          let titlName = `${data.gameName}`;
          context.fillStyle = "#ffff00";
          context.font = "normal bold 135px Adobe Ming Std";
          context.fillText(
            titlName,
            (3000 - (titlName ? titlName.length : 0) * 135) / 2,
            280
          );
          context.font = "100px Adobe Ming Std";
          if (keys[0] && keys[0].aavName != "qita") {
            context.fillText(
              `${keys[0] ? keys[0].fieldName : ""} ${data[keys[0].aavName] ? data[keys[0].aavName] : "--"
              }`,
              150,
              522
            );
          }
          if (keys[1] && keys[1].aavName != "qita") {
            context.fillText(
              `${keys[1] ? keys[1].fieldName : ""} ${data[keys[1].aavName] ? data[keys[1].aavName] : "--"
              } `,
              150,
              700
            );
          }
          if (keys[2] && keys[2].aavName != "qita") {
            context.fillText(
              `${keys[2] ? keys[2].fieldName : ""} ${data[keys[2].aavName] ? data[keys[2].aavName] : "--"
              }`,
              1100,
              522
            );
          }
          if (keys[3] && keys[3].aavName != "qita") {
            context.fillText(
              `${keys[3] ? keys[3].fieldName : ""} ${data[keys[3].aavName] ? data[keys[3].aavName] : "--"
              }`,
              1100,
              700
            );
          }

          if (keys[4] && keys[4].aavName != "qita") {
            context.fillText(
              `${keys[4] ? keys[4].fieldName : ""} ${data[keys[4].aavName] ? data[keys[4].aavName] : "--"
              }`,
              2100,
              522
            );
          }
          if (keys[5] && keys[5].aavName != "qita") {
            context.fillText(
              `${keys[5] ? keys[5].fieldName : ""} ${data[keys[5].aavName] ? data[keys[5].aavName] : "--"
              }`,
              2100,
              700
            );
          }
          // 底部
          if (keys[6]) {
            context.fillText(
              `${keys[6].fieldName ? keys[6].fieldName : ""} ${data[keys[6].aavName] ? data[keys[6].aavName] : "--"
              }`,
              (3000 -
                ((data[keys[6].aavName] ? data[keys[6].aavName].length : 0) +
                  (keys[6].fieldName ? keys[6].fieldName.length : 0)) *
                100) /
              2,
              2520
            );
          }

          // 皮肤字体
          context.font = "normal bold 90px Adobe Ming Std";
          let skin = arr.splice(0, 32);
          var x1 = 150;
          var h = 920;
          skin.map((item, index) => {
            if (index < 24) {
              if (index % 3 == 0) {
                x1 = 150;
                //控制行高
                h = h + 150;
              }
              let nametxt = item.fieldName.slice(0, 12);
              context.fillText(nametxt, x1, h);
              //控制列间隔
              x1 = x1 + 920;
            }
          });
          const base64Url = canvas.toDataURL("image/jpeg", 0.3);
          console.log(
            "%c 🍏 base64Url: ",
            "font-size:20px;background-color: #465975;color:#fff;",
            base64Url
          );
          resolve(base64Url);
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
// 绘制图片(无畏契约专属)  单页 可带边框 可带名称  可带标签  带标签时一定要加载好标签图片在imgs里面
function drawImagesWWQYLine(context, imgs, options) {
  // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
  if (imgs && imgs.length) {
    console.log("%c Line:590 🍕 imgs", "color:#f5ce50", imgs);
    let i = 0;
    let line = 1;
    let startX = options.startX;
    let startY = options.startY;
    let hideTxt = options.hideTxt || false;
    let isSign = options.isSign || false;
    let stepY = options.stepY || 70;
    let stepX = options.stepX || 112;
    let txtLineHeight = options.txtLineHeight || 39;
    let borderImg = options.borderImg || "";
    let imgWidth = options.imgWidth1 || 222;
    let height = options.imgHeight || 133;
    let y = startY + height + txtLineHeight;
    let imgy = startY;
    imgs.forEach((item) => {
      console.log("%c Line:801 🍭 单个图片item", "color:#ea7e5c", item);
      if ((i + 1) % (options.rowNum + 1) == 0) {
        imgy = imgy + stepY + height + txtLineHeight;
        y = imgy + height + txtLineHeight;
        line++;
        i = 0;
      }

      context.drawImage(
        item.image,
        startX + (imgWidth + stepX) * i,
        imgy,
        imgWidth,
        height
      );
      if (borderImg) {
        context.drawImage(
          borderImg,
          startX + (imgWidth + stepX) * i - 8,
          imgy - 8,
          imgWidth + 16,
          height + 16
        );
      }
      if (isSign && item.sign) {
        // 皮肤标签
        context.drawImage(
          item.sign,
          startX + (imgWidth + stepX) * i + imgWidth - 50,
          imgy,
          50,
          50
        );
      }
      if (!hideTxt) {
        context.fillText(item.name, startX + (imgWidth + stepX) * i, y);
      }
      i++;
    });
    return context;
  } else {
    return context;
  }
}
function makeTitleImgWWQY(data, list, attrs) {
  return new Promise((resolve, reject) => {
    // 取出已选择项
    let arr = [];
    let shiming = null;
    let viplv = null;
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        // if (item1.aavName == "f2") {
        //   if (data.f2) {
        //     viplv = item1.childAttributes.filter((i) => {
        //       return i.id == data.f2;
        //     });
        //   }
        // }
        // if (item1.aavName == "f16") {
        //   if (data.f16) {
        //     shiming = item1.childAttributes.filter((i) => {
        //       return i.id == data.f16;
        //     });
        //   }
        // }
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1) {
              arr.push(item2);
            }
          });
        }
      });
    }
    getURLBase64("/static/img/wwqybg.png")
      .then((res) => {
        const imageaaa = new Image();
        imageaaa.src = res;
        imageaaa.onload = async () => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imageaaa.width;
          canvas.height = imageaaa.height;
          context.drawImage(imageaaa, 0, 0, imageaaa.width, imageaaa.height);
          context.fillStyle = "#ffff00";
          context.font = "bold 65px Adobe Ming Std";
          context.fillText(`游戏等级：${data.f26 ? data.f26 : '--'}`, 133, 315);
          context.fillText(`尊爵数：${data.f24 ? data.f24 : '--'}`, 133, 532);
          context.fillText(`究极数：${data.f25 ? data.f25 : '--'}`, 133, 750);
          context.fillText(`限定数：${data.f23 ? data.f23 : '--'}`, 133, 965);
          // context.fillText(
          //   `已用源晶点：${data.yuanjingdian ? data.yuanjingdian : '--'}`,
          //   133,
          //   1010
          // );

          // const base64Url = canvas.toDataURL("image/jpeg", 0.3);
          // console.log(
          //   "%c 🍏 base64Url: ",
          //   "font-size:20px;background-color: #465975;color:#fff;",
          //   base64Url
          // );
          // resolve(base64Url);
          // context.fillText(`等       级：${data.f1 || "--"}`, 500, 1450);
          // context.fillText(`水晶数量：${data.f6 || "--"}`, 500, 1590);
          //  加载皮肤图片
          context.fillStyle = "#000";
          context.font = "25px Adobe Ming Std";
          let skinImgs = [];
          if (arr && arr.length) {
            skinImgs = await loadImages(arr, 20);
          } else {
            // 没有Sren
          }
          // .sort(sortBy("sort"))
          let instances = skinImgs.length ? skinImgs : [];
          // 加载边框
          // getURLBase64().then((border) => {
          // const borderImg = new Image();
          // borderImg.src = border;
          // borderImg.onload = () => {
          if (instances && instances.length) {
            let img15 = instances.splice(0, 20);
            // 开始绘制
            // startX,startY,rowNum,borderImg,imgWidth1,imgHeight,stepY,stepX
            let opts = {
              startX: 839,
              startY: 261,
              rowNum: 5,
              // borderImg: borderImg,
            };
            drawImagesWWQYLine(context, img15, opts);
            // 绘制结束
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          } else {
            const base64Url = canvas.toDataURL("image/jpeg", 0.8);
            resolve(base64Url);
          }
          //   };
          // });
        };
      })
      .catch((err) => {
        reject(err);
      });
  });
}
let obj = {
  makeDetailImg,
  makeTitleImg,
  makeTitleImgChang,
  makeTitleImgYjwj,
  makeTitleImgHpjy,
  makeTitleImgWWQY
};
export default obj;
